<template>
  <el-dialog
    title='环保设施基本信息'
    width="30%"
    :visible.sync='state'
    :modal-append-to-body='false'
    :close-on-click-modal='false'
    :close-on-press-escape='false'
    @close='closeBox'>

    <el-form :model='form' ref='form' size='small'>

      <el-row type='flex' class='row-bg' justify='space-between'>
        <el-col :span='12' class='grid-content'>

          <el-form-item label='企业名称：' :label-width='formLabelWidth' prop='companyName'>
            <el-input size='small' v-model='form.companyName' disabled autocomplete='off'></el-input>
          </el-form-item>

        </el-col>
      </el-row>

      <el-row type='flex' class='row-bg' justify='space-between'>
        <el-col :span='12' class='grid-content'>

          <el-form-item label='环保设施名称：' :label-width='formLabelWidth' prop='name'>
            <el-input size='small' v-model='form.name' disabled autocomplete='off'></el-input>
          </el-form-item>

        </el-col>
      </el-row>

      <el-row type='flex' class='row-bg' justify='space-between'>
        <el-col :span='12' class='grid-content'>

          <el-form-item label='委托合同：' :label-width='formLabelWidth' prop='name'>
           <el-link type="primary" v-for="item, index in form.contract" :key="index+'contract'" @click="preViewFile(item)">{{ item.name+ "&nbsp;&nbsp;" }}</el-link>
           </el-form-item>

        </el-col>
      </el-row>

      <el-row type='flex' class='row-bg' justify='space-between'>
        <el-col :span='12' class='grid-content'>
          <el-form-item label='设计方案 ：' :label-width='formLabelWidth' prop='name'>
          <el-link type="primary" v-for="item, index in form.designScheme" :key="index+'designScheme'" @click="preViewFile(item)">{{ item.name+ "&nbsp;&nbsp;" }}</el-link>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type='flex' class='row-bg' justify='space-between'>
        <el-col :span='12' class='grid-content'>
          <el-form-item label='施工监理资料：' :label-width='formLabelWidth' prop='name'>

          <el-link type="primary" v-for="item, index in form.constructionSupervision" :key="index+'constructionSupervision'" @click="preViewFile(item)">{{ item.name+ "&nbsp;&nbsp;" }}</el-link>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type='flex' class='row-bg' justify='space-between'>
        <el-col :span='12' class='grid-content'>
<el-form-item label='验收资料：' :label-width='formLabelWidth' prop='name'>

          <el-link type="primary" v-for="item, index in form.acceptanceData" :key="index+'acceptanceData'" @click="preViewFile(item)">{{ item.name+ "&nbsp;&nbsp;" }}</el-link>
</el-form-item>
        </el-col>
      </el-row>
     
    </el-form>

    <el-dialog
      title="预览文件"
      :visible.sync="preViewShow"
      width="70%"
      :modal-append-to-body="true"
      :append-to-body="true"
      :before-close="()=>{this.preViewShow=false;}" :show-close="true" :close-on-click-modal="false"
      :close-on-press-escape="true"
      ref="documentPreviewDialog">
      <document-preview :previewInfo.sync="preViewInfo" style="width: 100%;height: 50rem"
                        ref="documentPreview"></document-preview>
    </el-dialog>

  </el-dialog>
</template>
<script>
import DocumentPreview from "@/components/common/DocumentPreview";

export default {
  components: {
    DocumentPreview
  },
  props: ['id'],
  computed: {},
  data() {
    return {
      formLabelWidth: '120px',
      state: true,

      form: {
        name: '',
        type: "",
        
        contract: [],
        designScheme: [],
        constructionSupervision: [],
        acceptanceData: [],
    
      },
      preViewShow: false,
      preViewInfo: {},

    };
  },
  created() {
    this.getInfo(this.id);
  },
  mounted() {},
  methods: {
    preViewFile(row) {
      this.preViewShow = true;
      this.preViewInfo = row;
      // this.$ge.$emit('preview-document-reload',true);
    },
    closeBox() {
      this.state = false;
      this.$ge.$emit('biz-waste-info-view');
    },
    cancel(formName) {
      this.state = false;
      this.$refs[formName].resetFields();
    },

    getInfo(id) {
      this.$get('/biz-ep-facilities/simple', {id: id})
        .then((result) => {
          if (result.code == 200 && result.data) {
            this.form = Object.assign({}, this.form, result.data);
          }
        })
        .catch((error) => {

        });
    },

  },
};
</script>

<style>
.el-select {
  width: 100%;
}

.vue-treeselect__input {
  border: 0 !important;
}

.el-form-item__content {
  text-align: left;
}

/* 上传样式 start */
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

/* 上传样式 end */
</style>
